<template>
  <div class="chat-container">
    <el-card shadow="hover" class="chat-card">
      <div slot="header" class="chat-header">
        <h2>AI助手对话</h2>
        <el-tag type="success">ERNIE-3.5</el-tag>
      </div>

      <div class="input-section">
        <el-input
          v-model="input"
          type="textarea"
          :rows="5"
          placeholder="请输入您的问题或指令..."
          resize="none"
          show-word-limit
          :maxlength="8000"
        ></el-input>

        <div class="action-buttons">
          <el-button
            type="primary"
            @click="sendChat"
            :loading="loading"
            :disabled="!input.trim()"
            icon="el-icon-s-promotion"
          >
            发送
          </el-button>
          <el-button
            @click="clearChat"
            :disabled="!input.trim() && !response"
          >
            清空
          </el-button>
        </div>
      </div>

      <div v-if="loading" class="loading-section">
        <el-progress :percentage="80" :indeterminate="true" status="success"></el-progress>
        <p>AI正在思考中...</p>
      </div>

      <div v-if="responseData" class="response-section">
        <h3 class="response-title">
          <i class="el-icon-chat-line-round"></i> AI回复
          <el-tag size="mini" type="info" v-if="responseData.model">
            {{ responseData.model }}
          </el-tag>
        </h3>

        <el-card shadow="never" class="response-card">
          <div class="response-content">
            <div v-if="responseData.choices && responseData.choices[0]">
              <p>{{ responseData.choices[0].message.content }}</p>
            </div>

            <el-divider></el-divider>

            <div class="response-meta">
              <div class="meta-item">
                <span class="meta-label">请求ID:</span>
                <el-tag size="mini">{{ responseData.id || 'N/A' }}</el-tag>
              </div>
              <div class="meta-item">
                <span class="meta-label">创建时间:</span>
                <el-tag size="mini" type="info">
                  {{ formatTimestamp(responseData.created) }}
                </el-tag>
              </div>
              <div class="meta-item">
                <span class="meta-label">Tokens用量:</span>
                <el-tooltip
                  effect="dark"
                  content="prompt_tokens: 输入token数 | completion_tokens: 输出token数"
                  placement="top"
                >
                  <el-tag size="mini" type="warning" v-if="responseData.usage">
                    {{ responseData.usage.prompt_tokens }} + {{ responseData.usage.completion_tokens }} = {{ responseData.usage.total_tokens }}
                  </el-tag>
                </el-tooltip>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
import { chatWithBaiduQianfan } from '@/api/baiduQianfan';

export default {
  name: 'BaiduChatDemo',
  data() {
    return {
      input: '',
      responseData: null,
      loading: false,
    };
  },
  methods: {
    async sendChat() {
      if (!this.input.trim()) {
        this.$message.warning('请输入内容');
        return;
      }

      this.loading = true;
      this.responseData = null;

      try {
        const params = { content: this.input };
        const res = await chatWithBaiduQianfan(params);

        // 处理响应数据
        let data = res;
        if (typeof res === 'string') {
          try {
            data = JSON.parse(res);
          } catch (e) {
            console.error('解析响应数据失败:', e);
          }
        }

        this.responseData = data;
      } catch (error) {
        this.$message.error('请求出错: ' + error.message);
        console.error('API请求错误:', error);
      } finally {
        this.loading = false;
      }
    },

    clearChat() {
      this.input = '';
      this.responseData = null;
    },

    formatTimestamp(timestamp) {
      if (!timestamp) return 'N/A';
      return new Date(timestamp * 1000).toLocaleString();
    }
  },
};
</script>

<style scoped lang="scss">
.chat-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;

  .chat-card {
    border-radius: 8px;

    .chat-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;

      h2 {
        margin: 0;
        font-size: 20px;
        color: #333;
      }
    }
  }

  .input-section {
    margin-bottom: 20px;

    .action-buttons {
      margin-top: 15px;
      text-align: right;

      .el-button {
        margin-left: 10px;
      }
    }
  }

  .loading-section {
    text-align: center;
    padding: 20px 0;

    p {
      margin-top: 10px;
      color: #666;
    }
  }

  .response-section {
    margin-top: 30px;

    .response-title {
      display: flex;
      align-items: center;
      font-size: 18px;
      color: #333;
      margin-bottom: 15px;

      i {
        margin-right: 8px;
        color: #67C23A;
      }

      .el-tag {
        margin-left: 10px;
      }
    }

    .response-card {
      border: 1px solid #EBEEF5;
      border-radius: 4px;

      .response-content {
        p {
          line-height: 1.6;
          margin-bottom: 15px;
          color: #333;
        }
      }

      .response-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;

        .meta-item {
          display: flex;
          align-items: center;

          .meta-label {
            margin-right: 8px;
            font-size: 13px;
            color: #909399;
          }
        }
      }
    }
  }
}

.el-divider {
  margin: 15px 0;
}
</style>
